NocoBaseで問い合わせフォームを作成したい

NocoBaseで問い合わせフォームを作成したい

Clock Icon2024.09.13

ユースケース

  • 問い合わせが一元管理されないため、担当者の間で対応漏れや重複対応が発生する可能性が高まる。
  • 問い合わせの進捗や対応履歴が追跡できず、問題解決までの時間が長くなることがある。また、過去の問い合わせ内容を確認するのが困難。
  • 問い合わせ内容や頻度のデータを収集できず、どのような問題が多く発生しているかや、業務改善のための分析が難しい。

社内外問わず、提供しているサービスで問い合わせフォームがなくて上記の問題が出てくることがあると思います。

NocoBaseで作成したシステムでの対応案を考えていきたいと思います。

どう対応すればいいの?

Tree Collectionのデータ構造を使って、問い合わせと返信に対応できるようにします。

このコレクション構造はツリーを反映しており、各データ項目は1つ以上の子項目を持つことができ、それらの子項目は順番に自分の子孫を持つことができます

コレクションの作成

Data source manager のページで、使用しているデータソースを選択します。

スクリーンショット 2024-09-13 14.26.39

そのページの中のコレクションの作成Tree Collectionを選択します。

スクリーンショット 2024-09-13 14.32.15

コレクション名とコレクション識別子を入力し保存します。

フィールドの追加

スクリーンショット 2024-09-13 14.40.47

作成したコレクションのフィールドの設定ページからフィールドを追加します。

スクリーンショット 2024-09-13 14.45.47

今回は件名と本文を保存するためのフィールドを作成しました。

フォームを設置

スクリーンショット 2024-09-13 15.35.15
NocoBaseで作成しているページで ブロックを追加 をクリックしてフォームを選択します。
コレクションは先ほど作成した問い合わせのコレクションを選択します。

スクリーンショット 2024-09-13 15.38.39

上記のようにフォームブロックが追加されるので、ここにコレクションに追加したフィールドを設置します。

スクリーンショット 2024-09-13 15.40.02

件名と詳細を追加しました。

スクリーンショット 2024-09-13 15.51.11

操作の設定で送信ボタンを追加します(保存と言う名前ですが変更可能)

スクリーンショット 2024-09-13 15.53.06

フォームと同じようにブロックを追加からテーブルも追加しておきます。
送信後の問い合わせ一覧が確認できるように。

送信確認

先ほど設置したフォームから何か入力して送信してみます。

スクリーンショット 2024-09-13 16.05.07

作成した一覧用のテーブルにも表示されるようになりました。

スクリーンショット 2024-09-13 16.09.07

返信用フォームの作成

送信された問い合わせに返信できるように返信フォームを作ってみます。
スクリーンショット 2024-09-13 16.20.47

今回は一覧テーブルの操作カラムに追加できる編集メニューから作成してみます。
編集ボタンを追加し、クリックすると空っぽのダイアログが立ち上がリマス。
スクリーンショット 2024-09-13 16.23.03

フォーム(新規追加) -> 関連づけられたレコード -> Children を選択します。

スクリーンショット 2024-09-13 16.24.45

Childrenを選択することにより、Tree Collectionの子のデータとして返信内容を保存できるフォームが作成できます。

スクリーンショット 2024-09-13 16.34.01

問い合わせフォームと同じく送信ボタンを設置します。

詳細ブロックから現在のレコードを選択すると、返信元の問い合わせ内容 を表示することもできます。

スクリーンショット 2024-09-13 16.48.51

最初の問い合わせに対する返信のリストも、関連づけられたレコード -> Children を選択することによって表示することができます。


簡単な問い合わせ用のフォームを比較的簡単に作成することはできました。

NocoBaseのワークフローの機能を使うと、返信があったらSlackやメールにも通知したりとできそうだったので、別の機会に試してみます。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.